<template>
  <div class="detail">
    <el-card>
      <el-tabs v-model="active">
        <el-tab-pane label="登录账户设置" name="first">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="200px"
            class="demo-ruleForm"
          >
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="form.mobile" style="width: 40%" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="form.password"
                type="password"
                style="width: 40%"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="isOk">
                确定
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!-- 加lazy懒渲染 -->
        <el-tab-pane label="个人详情" name="second" lazy>
          <!-- 打印按钮 -->
          <el-row type="flex" justify="end">
            <el-tooltip content="打印个人基本信息">
              <router-link :to="`/employees/print/${id}?type=personal`">
                <i class="el-icon-printer" />
              </router-link>
            </el-tooltip>
          </el-row>
          <!-- 个人详情组件 -->
          <component :is="'UserInfo'" />
        </el-tab-pane>
        <el-tab-pane label="岗位设置" name="third" lazy>
          <!-- 打印按钮 -->
          <el-row type="flex" justify="end">
            <el-tooltip content="打印岗位信息">
              <router-link :to="`/employees/print/${id}?type=job`">
                <i class="el-icon-printer" />
              </router-link>
            </el-tooltip>
          </el-row>
          <!-- 个人详情组件 -->
          <component :is="'JobInfo'" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getEmployeeBaseInfo, saveEmployeeBaseInfo } from '@/api/user.js'
export default {
  name: 'DetailIndex',
  // 异步组件
  components: {
    UserInfo: () => import('./components/user-info.vue'),
    JobInfo: () => import('./components/job-info.vue')
  },
  data() {
    return {
      id: this.$route.params.id,
      active: 'first',
      form: {
        mobile: '',
        password: ''
      },
      rules: {
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' }
        ],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getEmployeeBaseInfo()
  },
  methods: {
    // 获取员工基本信息
    async getEmployeeBaseInfo() {
      const res = await getEmployeeBaseInfo(this.id)
      this.form = res
    },
    // 保存员工基本信息
    isOk() {
      this.$refs.form.validate(async (isOk) => {
        if (isOk) {
          await saveEmployeeBaseInfo(this.form)
          this.$message('保存成功')
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.detail {
  padding: 20px;
}
</style>
